<script setup lang="ts">
import { TimeInfo } from "@/types/home";

defineProps<{
  hourglass?: string;
  closeIcon?: string;
  timeInfo?: TimeInfo;
}>();

// Define emits
const emit = defineEmits<{
  close: void;
}>();
</script>

<template>
  <div class="h-[65%] bg-black/30 backdrop-blur-sm rounded-xl px-4">
    <!-- 标题 -->
    <div class="columns-2 mt-[20px]" style="width: 100%">
      <div>
        <div class="w-[30px] h-[20px]" style="display: inline-block">
          <img
            :src="hourglass"
            alt="关闭"
            class="transition-transform duration-300 hover:scale-125"
          />
        </div>
        <span class="ml-[10px] tracking-wide">时间流逝</span>
      </div>
      <!-- 关闭按钮 -->
      <div class="text-right">
        <button class="w-[20px] h-[20px]" @click="emit('close')">
          <img
            :src="closeIcon"
            alt="关闭"
            class="transition-transform duration-300 hover:scale-125"
          />
        </button>
      </div>
    </div>
    <!-- 时间流逝显示：天、月、年 -->
    <!-- 日进度 -->
    <div class="mt-[30px]">
      <span class="w-12 text-sm">今日已过: {{ timeInfo.day.elapsed }}</span>
      <span style="float: right" class="text-sm">剩余: {{ timeInfo.day.remaining }}</span>

      <div class="h-5 mt-2 bg-gray-600/40 rounded-full overflow-hidden">
        <div
          class="w-[100%] text-center h-full bg-white rounded-full"
          :style="{ width: timeInfo.day.progress + '%' }"
        >
          <span class="text-sm text-black">{{ Math.round(Number(timeInfo.day.progress)) }}% </span>
        </div>
      </div>
    </div>

    <!-- 月进度 -->
    <div class="mt-[30px]">
      <span class="w-12 text-sm">本月已过: {{ timeInfo.month.elapsed }}</span>
      <span style="float: right" class="text-sm">剩余: {{ timeInfo.month.remaining }}</span>

      <div class="h-5 mt-2 bg-gray-600/40 rounded-full overflow-hidden">
        <div
          class="w-[100%] text-center h-full bg-white rounded-full"
          :style="{ width: timeInfo.month.progress + '%' }"
        >
          <span class="text-sm text-black"
            >{{ Math.round(Number(timeInfo.month.progress)) }}%
          </span>
        </div>
      </div>
    </div>

    <!-- 年进度 -->
    <div class="mt-[30px]">
      <span class="w-12 text-sm">今年已过: {{ timeInfo.year.elapsed }}</span>
      <span style="float: right" class="text-sm">剩余: {{ timeInfo.year.remaining }}</span>

      <div class="h-5 mt-2 bg-gray-600/40 rounded-full overflow-hidden">
        <div
          class="w-[100%] text-center h-full bg-white rounded-full"
          :style="{ width: timeInfo.year.progress + '%' }"
        >
          <span class="text-sm text-black">{{ Math.round(Number(timeInfo.year.progress)) }}% </span>
        </div>
      </div>
    </div>

    <div class="flex items-center">
      <div class="w-[300px]">
        <img class="object-contain" src="/src/assets/home/easter-egg.png" />
      </div>
    </div>
  </div>
</template>
